<template>
  <div>
    <FormTable :formData="formData"
               :columnData="columnData"
               :url="$api.coupon_getlist"
               :editData="editData"
               :new_url="this.$api.coupon_insert"
               :detail_url="this.$api.coupon_info"
               :edit_url="this.$api.coupon_save"
               :is_default_edit="true"
               labelWidth="160px"
               :pageConfig="pageConfig"></FormTable>
  </div>
</template>

<script>
export default {
  data () {
    return {
      formData: [
        {
          name: "title",
          label: "优惠券标题",
          value: "",
          type: "input",
        },
        {
          name: "type",
          label: "优惠券类型",
          value: '',
          type: "select",
          groups: [
            {
              label: '所有',
              value: ''
            },
            {
              label: '全场通用券（无门槛）',
              value: '1'
            },
            {
              label: '满减券',
              value: '2'
            },
            {
              label: '某分类季卡/年卡',
              value: '3'
            },
            {
              label: '某权益优惠券',
              value: '4'
            },
            {
              label: '某卡券优惠券',
              value: '5'
            },
          ]
        },
        {
          name: "card_type",
          label: "卡券类型",
          value: '',
          type: "select",
          groups: [
            {
              label: '无',
              value: '0'
            },
            {
              label: '周卡',
              value: '1'
            },
            {
              label: '月卡',
              value: '2'
            },
            {
              label: '季卡',
              value: '3'
            },
            {
              label: '年卡',
              value: '4'
            },
            {
              label: '代金券',
              value: '5'
            },
            {
              label: '其他',
              value: '6'
            },
          ]
        },
        {
          name: "display",
          label: "是否显示",
          value: '',
          type: "select",
          groups: [
            {
              label: '所有',
              value: ''
            },
            {
              label: '是',
              value: 1
            },
            {
              label: '否',
              value: 0
            },
          ]
        },
      ],
      columnData: [
        {
          prop: "coupon_id",
          label: "id"
        },
        {
          prop: "title",
          label: "优惠券标题"
        },
        {
          prop: "with_amount",
          label: "满减金额"
        },
        {
          prop: "used_amount",
          label: "金额/折扣"
        },
        {
          prop: "with_special",
          label: "可否可用于特价商品"
        },
        {
          prop: "type",
          label: "优惠券类型"
        },
        {
          prop: "card_type",
          label: "卡券类型"
        },
        {
          prop: "limit_num",
          label: "领取次数限制"
        },
        {
          prop: "connect_name",
          label: "关联名称"
        },
        {
          prop: "display",
          label: "是否显示",
          custom: true,
          type: 'switch',
          url: this.$api.coupon_status
        },
        {
          prop: 'btn_group',
          label: '操作',
          custom: true,
          type: 'btn_group',
          width:'200px',
          group: [
            {
              name: '编辑',
              type: 'edit',
              color: 'primary',
              detail_mark: 'coupon_id',
            },
            {
              name: '删除',
              type: 'delete',
              color: 'danger',
              url: this.$api.coupon_status
            }
          ]
        }
      ],
      editData: [
        {
          name:'coupon_id',
          label:'优惠券id',
          value:'',
          type:'input',
          display:'none'
        },
        {
          name: 'title',
          label: '优惠券标题',
          value: '',
          type: 'input',
          rules:[
            { required: true, message: "请输入优惠券标题", trigger: "blur" },
          ]
        },
        {
          name: 'used_amount',
          label: '金额/折扣',
          value: '',
          type: 'input',
          datatype:'number',
          rules:[
            { required: true, message: "请输入金额/折扣", trigger: "blur" },
            { type: 'number', message: '金额/折扣必须为数字值'},
          ]
        },
        {
          name: 'valid_month',
          label: '有效期,单位（月）',
          value: '',
          type: 'input',
          datatype:'number',
          rules:[
            { required: true, message: "请输入有效期", trigger: "blur" },
            { type: 'number', message: '有效期必须为数字值'},
          ]
        },
        {
          name: "with_special",
          label: "商品类型",
          value: '',
          type: "select",
          groups:[
            {
              label: '可用于特价商品',
              value: '1'
            },
            {
              label: '不能(商品优惠卷除外)',
              value: '2'
            },
          ],
          rules:[
            { required: true, message: "请选择商品类型", trigger: "blur" },
          ]
        },
        {
          name: "type",
          label: "优惠券类型",  
          value: '',
          type: "select",
          groups:[],
          sel_arr:['with_amount','connect_id','card_type'],
          sel_rule:[
            {
              id:1,
              show_arr:[],
            },
            {
              id:2,
              show_arr:['with_amount'],
            },
            {
              id:3,
              show_arr:['with_amount','connect_id','card_type'],
              change_arr:[
                {
                  name:'connect_id',
                  url:`${this.$api.category_getnopagelist}?isfree=0`,
                  labelKey:'name',
                  valueKey:'category_id'
                }
              ]
            },
            {
              id:4,
              show_arr:['with_amount','connect_id','card_type'],
              change_arr:[
                {
                  name:'connect_id',
                  url:`${this.$api.rights_getnopagelist}`,
                  labelKey:'name',
                  valueKey:'rights_id'
                }
              ]
            },
            {
              id:5,
              show_arr:['with_amount','connect_id','card_type'],
              change_arr:[
                {
                  name:'connect_id',
                  url:`${this.$api.card_getnopagelist}?type=2`,
                  labelKey:'name',
                  valueKey:'card_id'
                }
              ]
            },
          ],
          rules:[
            { required: true, message: "请选择优惠券类型", trigger: "blur" },
          ]
        },
        {
          name: "card_type",
          label: "卡券类型",
          value: '',
          type: "select",
          groups: [],
          rules:[
            { required: true, message: "请选择卡券类型", trigger: "blur" },
          ]
        },
        {
          name: "connect_id",
          label: "商品",
          value: '',
          type: "select",
          groups:[
            
          ],
          config:{
            filterable:true
          },
        },
        {
          name: 'with_amount',
          label: '满减金额',
          value: '',
          type: 'input',
          datatype:'number',
          rules:[
            { type: 'number', message: '满减金额必须为数字值'},
          ]
        },
        {
          name: 'limit_num',
          label: '领取次数限制',
          value: '1',
          type: 'input',
        },
        {
          name: 'display',
          label: '是否显示',
          value: '',
          type: 'switch',
          config: {
            'active_value': '1',
            'inactive-value': '0'
          }
        },
      ],
      pageConfig: {
        page: 1,
        pagesize: 10,
      }
    };
  },
  created () {
    this.getCard();
  },
  methods: {
    getCard(){
      this.$req.get(this.$api.card_getnopagelist).then(res => {
        let data = res.data;
        for (var i in data) {
          this.editData[1].groups.push({
            label: data[i].name,
            value: data[i].card_id,
          })
        }
      })
    },
    getCard () {
      // 获取优惠券类型列表
      let req1 = this.$req.get(this.$api.coupon_coupontype)
      // 获取卡券类型列表
      let req2 = this.$req.get(this.$api.card_cardtype)
      Promise.all([req1, req2]).then(values => {
        this.dataHandler(values[0].data, 1, 5, 'coupon_type_name', 'coupon_type_id');
        this.dataHandler(values[1].data, 2, 6, 'card_type_name', 'card_type_id');
      })
    },
    dataHandler (data, idx1, idx2, labelKey, valueKey) {
      for (var i in data) {
        if(typeof idx1 == 'number'){
          this.formData[idx1].groups.push({
            label: labelKey ? data[i][labelKey] : data[i],
            value: valueKey ? data[i][valueKey] : data[i]
          })
        }
        this.editData[idx2].groups.push({
          label: labelKey ? data[i][labelKey] : data[i],
          value: valueKey ? data[i][valueKey] : data[i],
        })
      }
    },
    handleSizeChange (e) {
      console.log(e);
    },
    handleCurrentChange (e) {
      console.log(e);
    },
    submit (e) {
      console.log(e);
    },
    reset (e) {
      console.log(e);
    }
  }
}
</script>

<style lang="scss" scoped>
</style>